<!--
 * @Author: your name
 * @Date: 2021-09-26 15:10:03
 * @LastEditTime: 2021-10-06 17:13:21
 * @LastEditors: Please set LastEditors
 * @Description: 此页面在移动端情况下不可用
 * @FilePath: \bigdatavue\src\views\others\test.vue
-->
<template>
    <Row :gutter="[10, 10]">
        <Col span="5">
            <Row>
                <Col span="24">
                    <Card>
                        <div class="header">控件栏</div>
                    </Card>
                </Col>
                <Col span="24">
                    <Card>
                        <ToolList @handleDrag="startDrag" />
                    </Card>
                </Col>
            </Row>
        </Col>
        <Col span="14">
            <Row>
                <Col span="24">
                    <Card>
                        <Toolbar
                            :zoom-value="zoom"
                            @ChangeBgColor="ChangeBgColors"
                            @allhandleClick="allhandleClicks"
                            @salecZoom="salecZooms"
                        />
                    </Card>
                </Col>
                <Col span="24">
                    <Card>
                        <div class="flow-content">
                            <div ref="refContainer" className="flow-content_chart" />
                            <div ref="nodeMenu" class="flow-content_menu">
                                <Tooltip @handleClick="handleClicks" />
                            </div>
                        </div>
                    </Card>
                </Col>
            </Row>
        </Col>
        <Col span="5">
            <Row>
                <Col span="24">
                    <Card>
                        <div class="header">节点配置</div>
                    </Card>
                </Col>
                <Col span="24">
                    <Card>
                        <Editbar
                            :get-dateinfo="getDateinfo"
                            @handleColor="handleTextColors"
                            @handleSize="handleSizes"
                            @handleClick="handleTextClicks"
                            @changeText="onChangeText"
                        ></Editbar>
                    </Card>
                </Col>
            </Row>
        </Col>
    </Row>
    <Tooljson
        :datas="jsondata"
        :visible="visibles"
        @handleClose="handleCloses"
    ></Tooljson>
</template>
<script lang="ts">
import {
    defineComponent,
    ref,
    toRaw,
    computed,
    unref,
    onMounted,
    watch,
} from 'vue'
import { Button, Row, Col, Card } from 'ant-design-vue'
import ToolList from './components/Toollist.vue'
import Toolbar from './components/Toolbar.vue'
import Tooltip from './components/tooltip.vue'
import Tooljson from './components/Tooljson.vue'
import Editbar from './components/editbar.vue'
import { graphExample } from '@/hooks/useFlowechart'
import {
    createNode,
    createRcondNode,
    createSquareNode,
} from '@/hooks/flowconfig'
import { useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import type { ComputedRef } from 'vue'
import BaseicModal from '@/components/Modal/Modalwarp.vue'

export default defineComponent({
    name: 'Flowechart',
    components: {
        BaseicModal,
        Toolbar,
        ToolList,
        Tooltip,
        Tooljson,
        Editbar,
        Button,
        Card,
        Row,
        Col,
    },

    setup() {
    // 路由变化
        const route = useRoute()
        // json 数据jsondata
        const jsondata = ref<ComputedRef<any>>()
        let datas = []
        // json显示
        const visibles = ref<ComputedRef<any>>()
        // 节点信息
        const getDateinfo = ref<ComputedRef<any>>()
        // 缩放
        let zoom = ref()
        // 面板
        let refContainer = ref<HTMLDivElement | null>(null)
        // menu
        let nodeMenu = ref<HTMLDivElement | null>(null)
        // 面板方法
        let graphfun
        // 面板对象实例
        // 由于每次更换页面面板都会小时
        let fun: any
        onBeforeRouteLeave((to, from, next) => {
            // 离开当前的组件，触发
            if (datas.length > 0) {
                alert('离开后内容将不会被保存！！！')
                datas = []
            }
            next()
        })
        watch(
            () => route.path,
            () => {
                if (route.path == '/functions/editor') {
                    if (graphfun != undefined) {
                        graphfun = undefined
                        init()
                    }
                }
            },
        )
        onMounted(() => {
            init()
            zoom.value = computed(() => {
                const zvalue = unref(graphfun.getZoomValue())
                return Math.round(zvalue * 100)
            })

            visibles.value = computed(() => {
                const ivalue = unref(graphfun.getShowJson())
                return ivalue
            })
            jsondata.value = computed(() => {
                const ivalue = unref(graphfun.getJsonData())
                return ivalue
            })
            getDateinfo.value = computed(() => {
                const ivalue = unref(graphfun.getDateinfo())
                return ivalue
            })
        })

        // 初始化
        const init = () => {
            let { graphs } = graphExample(refContainer.value, nodeMenu.value, {
                globalStyle: {
                    color: '#fff',
                    width: window.innerWidth,
                    height: window.innerHeight,
                },
            })
            graphfun = toRaw(graphs)
        }

        // 拖拽生成Node
        const startDrag = (option) => {
            datas.push(option.node)
            if (option.node.dataType == 'react') {
                graphfun.addNode(createNode(option.node), option.e)
            } else if (option.node.dataType == 'round') {
                graphfun.addNode(createRcondNode(option.node), option.e)
            } else if (option.node.dataType == 'square') {
                graphfun.addNode(createSquareNode(option.node), option.e)
            }
        }
        // 节点菜单反馈事件
        const handleClicks = (options: any) => {
            graphfun.handleClick(options)
        }
        // 点击顶部工具栏
        const allhandleClicks = (options: any) => {
            switch (options.id) {
                case 'fontWeight':
                    graphfun.attrWeight()
                    break
                case 'undo':
                    graphfun.undo()
                    break
                case 'svg':
                    graphfun.toSvg()
                    break
                case 'png':
                    graphfun.toPngJpg()
                    break
                case 'copy':
                    graphfun.nodeCopy()
                    break
                case 'cut':
                    graphfun.nodeCut()
                    break
                case 'json':
                    graphfun.openJson(true)
                    break
            }
        }
        // 缩放
        const salecZooms = (e) => {
            graphfun.contentZoom(e)
        }
        // 更换颜色
        const ChangeBgColors = (e) => {
            graphfun.changeBgcolor(e)
        }
        // 关闭弹窗
        const handleCloses = (e) => {
            graphfun.openJson(e)
        }
        // 字体样式更改
        const handleTextClicks = (e) => {
            switch (e.type) {
                case 'weight':
                    graphfun.attrWeight(e.style)
                    break
                case 'style':
                    graphfun.settingTextstyle(e.style)
                    break
                case 'undline':
                    graphfun.settingTextundlin(e.style)
                    break
            }
        }
        // 字体颜色更改
        const handleTextColors = (e) => {
            graphfun.settingTextColor(e)
        }
        // 文字大小
        const handleSizes = (e) => {
            graphfun.settingTextSize(e)
        }
        // 更改内容
        const onChangeText = (e) => {
            graphfun.settingText(e)
        }
        return {
            refContainer,
            onChangeText,
            handleTextClicks,
            handleTextColors,
            handleSizes,
            handleClicks,
            allhandleClicks,
            handleCloses,
            startDrag,
            salecZooms,
            ChangeBgColors,
            getDateinfo,
            nodeMenu,
            visibles,
            jsondata,
            zoom,
        }
    },
})
</script>

<style lang="less" scoped>
// css 穿透使用必须通过父级
.header {
  width: 100%;
  height: 40px;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  color: #666;
}
.ant-card /deep/ .ant-card-body {
  padding: 0;
}
.flow-content {
  width: 100%;
  height: calc(85vh);
  position: relative;
  overflow: hidden;

  &_menu {
    width: 150px;
    height: 50px;
    background: #ccc;
    position: absolute;
    z-index: 999;
    visibility: hidden;
    top: 0;
    left: 0;
  }
}
</style>
